<template>
    <div class="estimate">
            <div class="estimate_title">用户心声</div>
            <div class="estimate_desc">
                累计服务客户超过100万，用户满意度高达99%
            </div>
            <div class="estimate_wrap">
                <p>感谢你们及时应对业务，在约定时间范围完成翻译，
此次文档我们先用于临时性的页面，还请你们继续完成后续校对工作，再将校对后的文档发我。</p>
                <div class="liner"></div>
                <div class="intro">
                    pdf格式的文档，直接上传，成功转成docx文档，最重要是“免费”。
                </div>
            </div>
            <div style="padding-top:40px">
                <Space :size="16" wrap>
                    <Avatar :size="60">
                        <template #icon>
                            <UserOutlined />
                        </template>
                    </Avatar>
                    <Avatar :size="60">U</Avatar>
                    <Avatar :size="60">USER</Avatar>
                    <Avatar :size="60" src="https://www.antdv.com/assets/logo.1ef800a8.svg" />
                    <Avatar :size="60" style="color: #f56a00; background-color: #fde3cf">U</Avatar>
                </Space>
            </div>
        </div>
</template>
<script lang="ts" setup>
import {Button,Tabs,TabPane,Card,CardMeta,CardGrid,TypographyTitle,RadioGroup,RadioButton,Flex,Avatar,Statistic,Space} from 'ant-design-vue'
import {CheckCircleOutlined,RetweetOutlined,CodeOutlined,VideoCameraAddOutlined,LinkOutlined,PlusOutlined,FileDoneOutlined} from '@ant-design/icons-vue'
</script>
<style lang="scss" scoped>
.estimate{
        width: $content-body-width;
        margin: 80px auto;
        text-align: center;
        position: relative;
        padding-bottom: 80px;
        @include font_color("main-index-about-font");
        &::after{
            position: absolute;
            content: "";
            inset: 0;
            top: 20px;
            opacity: 0.1;
            background: url('../assets/Circles.png') no-repeat center top;
        }
        &_title{
            font-size: 28px;
            @include font_color;
            font-weight: 600;
        }
        &_desc{
            font-size: 14px;
            @include font_color;
            line-height: 14px;
            margin:20px 0;
            opacity: 0.6;
        }

        &_wrap{
            margin-top: 40px;
            border: 1px solid rgba(213, 213, 213, 0.1);
            text-align: center;
            position: relative;
            border-radius: 10px;
            min-height: 240px;
            background-color: rgba($color: #fff, $alpha: 0.05);
            box-sizing: border-box;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            .liner{
                margin: 19px auto;
                width: 16px;
                height: 2px;

                background-color: rgba(252, 58, 77, 1);
            }
            .intro{
                font-size: 14px;
                font-weight: 400;
                @include font_color;
            }
            p{
                margin: 0 auto;
                padding: 0px;
                padding-top: 20px;
                max-width: 60%;
                @include font_color;
            }
            &::after{
                position: absolute;
                content: "";
                background: url('../assets/concat.png') no-repeat;
                width: 56px;
                height: 64px;
                background-size: 100% 100%;
                right: 20px;
                bottom: 20px;
                opacity: 0.2;
            }
        }
    }
</style>